// 样式路由
const styleUrl = 'components/InputModal/index.css';

class InputModal extends HTMLElement {
  constructor() {
    super();

    const defaultProps = {
      width: 400,
      height: 200,
      title: 'Title',
      closable: true, // 是否显示右上角关闭按钮
      input_label: 'Label Field',
      cancel_text: '取消',
      ok_text: '确定',
      z_index: 20,
      on_cancel: 'onCancel',
      ok() {},
    };
    // 获取自定义属性
    const customProps = getCustomProps(this.attributes) || {};

    // 属性合并
    // this.props = Object.assign(defaultProps, customProps);
    this.props = { ...defaultProps, ...customProps };
    
    const shadowRoot = this.attachShadow({ mode: 'open' }); 
    // 生成模板
    shadowRoot.innerHTML = this.template();
    // 添加样式
    const styleEle = document.createElement('style');
    styleEle.textContent = `@import url(${styleUrl})`;
    shadowRoot.appendChild(styleEle);
  }

  // 模板
  template() {
    // 获取浏览器宽高(给modal设置)
    const { width: mWidth, height: mHeight } = getBrowserWH(document) || {};
    // 获取modal-content的大小
    const mcWidth = typeof this.props.width === 'number' ? this.props.width + 'px' : this.props.width;
    const mcHeight = typeof this.props.height === 'number' ? this.props.height + 'px' : this.props.height;
    const mcZIndex = this.props.z_index;

    return `
      <div class="modal" style="width: ${mWidth};height: ${mHeight}">
        <div class="modal-mask"></div>
        <div class="modal-content" style="width: ${mcWidth};height: ${mcHeight};z-index:${mcZIndex};">
          <div class="modal-content-header">
            <div class="modal-content-header-title">${this.props.title}</div>
            ${this.props.closable ? `<div class="modal-content-header-close" id="modal-content-header-close" onclick="${this.props.on_cancel}()">x</div>` : ''}
          </div>
          <div class="modal-content-body">
            <div class="modal-content-body-content">
              <div class="modal-content-body-content-label">${this.props.input_label}</div>
              <input class="modal-content-body-content-input" id="modal-content-body-content-input" />
            </div>
          </div>
          <div class="modal-content-tail">
            <div class="modal-content-tail-close" id="modal-content-tail-close" onclick="${this.props.on_cancel}()">${this.props.cancel_text}</div>
            <div class="modal-content-tail-sure" id="modal-content-tail-sure">${this.props.ok_text}</div>
          </div>
        </div>
      </div>
    `
  }

  // 生命周期:首次被插入文栏DOM时
  connectedCallback() {
    console.log('首次插入');
  }

  // 生命周期:从文档DOM中删除时
  disconnectedCallback() {
    console.log('删除');
  }

  // 生命周期:被移动到新的文档时
  adoptedCallback() {
    console.log('新的文档');
  }

  // 生命周期:监听属性变化
  attributeChangedCallback() {
   console.log('属性变化');
  }
}

customElements.define('input-modal', InputModal);

// function onCancel() {
//   document.querySelector('input-modal').style.display = 'none';
// }